<template>
  <a-card>
    <a-form :model="storeConfig" auto-label-width @submit-success="submit">
      <a-card :bordered="false">
        <a-form-item :label="t['门店名称']">
          <div class="flex">
            <a-input v-model="store.user.storeName"></a-input>
            <a-button @click="changeStoreName" type="primary">{{ t["修改"] }}</a-button>
          </div>
        </a-form-item>
        <a-form-item
          field="title"
          :label="t['网页标题']"
          :rules="[{ message: '2-16', minLength: 2, maxLength: 16 }]"
        >
          <div>
            <a-input
              v-model="storeConfig.title"
              :max-length="16"
              show-word-limit
              :placeholder="t['请输入页面标题']"
            />
          </div>
        </a-form-item>

        <a-form-item field="logo" :label="t['主题']">
          <div>
            <a-radio-group
              v-model="storeConfig.theme"
              :options="translateOptions(themeOptions)"
            ></a-radio-group>
          </div>
        </a-form-item>

        <a-form-item field="logo" label="LOGO">
          <div class="upload" @click.self.stop="showFileSelector = true">
            <a-upload v-if="!storeConfig.logo" class="update-component" draggable> </a-upload>
            <a-image v-else :src="storeConfig.logo" width="200"> </a-image>
          </div>
        </a-form-item>

        <a-form-item field="logo" :label="t['库存阈值']">
          <div class="w-[200px]">
            <a-input-number :min="0" v-model="storeConfig.stock"></a-input-number>
          </div>
        </a-form-item>

        <a-row>
          <a-col :offset="1">
            <a-button type="primary" html-type="submit">
              {{ t["保存"] }}
            </a-button>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </a-card>
  <Teleport to="body">
    <FileSelector
      v-model:visible="showFileSelector"
      v-model:selectedList="storeConfig.logo"
      @change="setAvatar"
    />
  </Teleport>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";
import { editStore, updateDetails, updateStore } from "@/api/service/store/store";

import { userStore } from "@/store/modules/user/user";
import FileSelector from "@/views/admin/components/file-selector/FileSelector.vue";
import { storeConfig, themeOptions } from "@/views/admin/system/system";
const store = userStore();
const showFileSelector = ref();
const t = translate("公共模块");

const submit = async () => {
  await updateDetails(storeConfig.value);
  document.title = storeConfig.value.title;
};

const setAvatar = (library: Library[]) => {
  if (library[0] && library[0].uri) {
    storeConfig.value.logo = library[0].uri;
  }
};

const changeStoreName = async () => {
  const { data } = await editStore(store.user.deptId);
  data.storeName = store.user.storeName;
  updateStore(data);
};
</script>

<style lang="scss" scoped>
.upload {
  padding: 0 12px;

  * {
    pointer-events: none;
  }
}
</style>
